<!doctype html>
<html xmlns="">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>支分宝</title>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/api.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/aui.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/swiper.min.css"/>
  <style>
    html,body{
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(255, 125, 3, 1), rgba(255, 96, 9, 1));
    }
    .marquee-area {
      height: 1.75rem;
      background: #ffffff;
      overflow: hidden;
    }
    .marquee-area .swiper-container {
      height: 1.75rem;
    }
    .marquee-area .info {
      height: 1.75rem;
      text-align: center;
      line-height: 1.75rem;
      color: #A83702;
      font-size: 0.65rem;
    }

    .content-area {
      position: relative;
    }
    .bg-area{
      display: flex;
      flex-flow: column;
    }
    .bg-area img {
      width: 100%;
    }

    .bg-color {
      flex: 1;
      background: linear-gradient(90deg, rgba(255, 125, 3, 1), rgba(255, 96, 9, 1));
    }

    .top-area {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding-top: calc(100vw * 858 / 750 * (621 / 850));
    }

    .input-area {
      width: calc(100vw / 750 * 691);
      background: rgba(255, 241, 227, 1);
      border-radius: 0.5rem;
      margin: 0 auto;
      position: relative;
      padding-top: calc(100vw * 55 / 750);
      padding-bottom: calc(100vw * 27 / 750);
      margin-bottom: 0.6rem;
    }

    .tip {
      position: absolute;
      width: calc(100vw * 532 / 750);
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .input {
      width: calc(100vw * 592 / 750);
      height: calc(100vw * 89 / 750);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 3px 8px 1px rgba(255, 203, 167, 1);
      border-radius: 1.1rem;
      margin: 0 auto 0.9rem;
      display: flex;
      align-items: center;
      padding-left: 0.8rem;
      padding-right: 1.075rem;
    }

    .invite-code {
      width: calc(100vw * 592 / 750);
      padding-left: calc(100vw * 42 / 750);
      margin: 0 auto;
      color: #FF9000;
      font-size: 0.55rem;
    }

    .btn-register {
      width: calc(100vw * 691 / 750);
      height: calc(100vw * 80 / 750);
      background: linear-gradient(90deg, rgba(255, 198, 45, 1), rgba(254, 197, 45, 1));
      box-shadow: 0 0.075rem 0.2125rem 0 rgba(135, 51, 0, 0.06), 0 0.175rem 0.375rem 0 rgba(255, 237, 166, 0.2), 0 -0.1rem 0.3rem 0 rgba(255, 42, 0, 0.56);
      border-radius: 1rem;
      margin: 0 auto;
      color: #C74111;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.25rem;
    }
    .step{
      width: calc(100vw * 691 / 750);
      margin: 0 auto;
      margin-top: 1.575rem;
      padding: 0 0.75rem;
      color: #FFFFFF;
      font-size: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .step-item{
      position: relative;
      text-align: center;
    }
    .step-item:before{
      content: "";
      display: block;
      position: absolute;
      top: -0.85rem;
      left: 50%;
      transform: translateX(-50%);
      width:0.5rem;
      height:0.5rem;
      background:rgba(255,241,18,0.8);
      border-radius:50%;
    }
    .step-item:nth-child(1):after{
      content: "";
      display: block;
      position: absolute;
      top: -0.6rem;
      left: 50%;
      right: 0;
      height:1px;
      background:rgba(255,241,18,0.8);
    }
    .step-item:nth-child(2):after{
      content: "";
      display: block;
      position: absolute;
      top: -0.6rem;
      left: 0;
      right: 0;
      height:1px;
      background:rgba(255,241,18,0.8);
    }
    .step-item:nth-child(3):after{
      content: "";
      display: block;
      position: absolute;
      top: -0.6rem;
      left: 0;
      right: 50%;
      height:1px;
      background:rgba(255,241,18,0.8);
    }
    .input .type{
      width: 1.15rem;
      height: 1.15rem;
    }
    .input .text{
      flex: 1;
      margin-left: 0.5rem;
      font-size: 0.7rem;
    }
    .input .msg{
      color: #FA402F;
      font-size: 0.7rem;
    }
  </style>
</head>
<body>
<div id="app" v-cloak="">
  <div class="marquee-area">
    <div class="swiper-container swiper-no-swiping" v-if="marqueeList.length>0">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in marqueeList" :key="item.par_user_id">
          <div class="info">
            恭喜“{{item.user_username}}”升级“{{item.class_name}}”
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="content-area">
    <div class="bg-area">
      <img src="/static/admin/jingtaiwu/bg1.png" alt="">
      <div class="bg-color"></div>
    </div>
    <div class="top-area">
      <div class="input-area">
        <img src="/static/admin/jingtaiwu/tip.png" alt="" class="tip">
        <div class="input name">
          <img src="/static/admin/jingtaiwu/phone.png" alt="" class="type">
          <div class="text">
            <input type="text" placeholder="请填写手机号" v-model="phone">
          </div>
        </div>
        <div class="input code">
          <img src="/static/admin/jingtaiwu/lock.png" alt="" class="type">
          <div class="text">
            <input type="text" placeholder="请输入验证码" v-model="code">
          </div>
          <div class="msg" @click="sendCode">{{word}}</div>
        </div>
        <div class="invite-code">邀请码:{{invite_code}}</div>
      </div>
      <div class="btn-register" v-if="isTrue" @click="register">立即注册</div>
      <div class="btn-register" v-else @click="register1">立即注册</div>
      <div class="step">
        <div class="step-item">输入手机号注册</div>
        <div class="step-item"  style="flex: 1">下载登录支分宝</div>
        <div class="step-item">个人中心升级合伙人</div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="/static/admin/jingtaiwu/api.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/utils.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/swiper.min.js"></script>
<script src="/static/admin/jingtaiwu/vue.min.js"></script>
<script src="/static/admin/jingtaiwu/vue-extend.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/common1.js"></script>
<script>
  var _ApiPath = "http://csdl.jintianjifen.cn/";
  var url1 = _ApiPath + 'api/user/par_invite';
  var url2 = _ApiPath + 'api/user/register';
  var apibasesendVerifyCode = _ApiPath + "api/base/sendVerifyCode";
  var time = 60;
  var vm = new Vue({
    el: '#app',
    data: {
      marqueeList: [],
      phone:"",
      code:"",
      invite_code:"",
      canSend: true,
      word:"获取验证码",
      isTrue:true
    },
    methods: {
      initData: function () {
        var _this = this;
        postAjax(url1, {values: {}}, function (res, err) {
          if (res && res.status === 200) {
            _this.marqueeList = res.msg;
            _this.$nextTick(function () {
              new Swiper('.swiper-container', {
                loop: true,
                slidesPerView: "auto",
                direction: 'vertical',
                loopAdditionalSlides: 1,
                speed: 600,
                autoplay: {
                  disableOnInteraction: false, //手动滑动之后不打断播放
                  delay: 2000
                },
                freeMode : true,
                pagination: {
                  el: '.swiper-pagination'
                },
                on: {}
              });
            })
          }
        })
      },
      register:function () {
        this.isTrue=false;
        if(!isPhone(this.phone)){
          alert("手机号码不符合要求");
          return;
        }
        if(this.code===""){
          alert("请输入验证码")
        }
        if(!this.invite_code){
          alert("请检查链接是否正确")
        }
        var data = {
          values:{
            invite_code:this.invite_code,
            phone:this.phone,
            code:this.code
          }
        }
        postAjax(url2,data,function (res) {
          if(res&&res.status===200){
            alert("注册成功");
             setTimeout(function () {
                tz();
              });
          }else{
            this.isTrue=true;
            alert(res.msg)
          }
        })
      },
      register1:function(){
        alert("请勿重复点击注册");
      },
      sendCode: function () {
        if (!this.canSend) {
          return;
        }
        var _self = this;
        if (isPhone(this.phone)) {
          var data = {
            type: '1',
            phone: _self.phone
          };
          data = {
            values: data
          };
          $.ajax({
            type: "POST",
            url: apibasesendVerifyCode,
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
            data: data.values,
            dataType: "json",
            success: function (ret) {
              if (ret.status === 200) {
                _self.canSend = false;
                _self.timer = setInterval(function () {
                  _self.word = time + 's';
                  time--;
                  if (time <= 0) {
                    clearInterval(_self.timer);
                    time = 60;
                    _self.word = '再次发送';
                    _self.canSend = true;
                  }
                }, 1000);
              } else {
                alert(ret.msg);
              }
            },
            error: function (e) {
              alert('发送失败');
            }
          });
        } else {
          alert("手机号不正确");
        }
      },
    },
    filters: {},
    mounted: function () {
      this.initData();
      this.invite_code = getQueryVariable('code')||''
    }
  });
  window.onload = function (ev) {
    $('.bg-area').css('height',$('.top-area').innerHeight()+'px')
  }
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return false;
  }

  function tz() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      var loadDateTime = new Date();
      window.setTimeout(function () {
        var timeOutDateTime = new Date();
        if (timeOutDateTime - loadDateTime < 5000) {
          window.location = 'itms-apps://itunes.apple.com/cn/app/%E4%BB%8A%E5%A4%A9%E7%A7%AF%E5%88%86/id1468418168';
        } else {
          window.close();
        }
      }, 300);
    } else {
      window.setTimeout(function () {
        window.location.href = 'https://csdl.jintianjifen.cn/zhifenbao.apk';
      }, 300);
    }
  }

  function isPhone(val) {
    var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    return reg.test(val);
  }
</script>
</html>
